import React from 'react'
import { Routes, Route,NavLink, Link } from 'react-router-dom'
import Index from './pages/Index'
import Login from './pages/Login'
import Order from './pages/Order'
import User from './pages/User'
import "./App.css"

export default function App() {
    return (
        <div>
            <h3>App</h3>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/login">登录页面</a></li>
                <li><a href="/user">用户页面</a></li>
                <li><a href="/order">订单页面</a></li>
            </ul>
            <ul>
                <li><NavLink to='/'>首页</NavLink></li>
                <li><NavLink to='/login'>登录页</NavLink></li>
                <li><NavLink to='/user'>用户页</NavLink></li>
                <li><NavLink to='/order'>订单页</NavLink></li>
            </ul>

            <ul>
                <li><Link to='/'>首页</Link></li>
                <li><Link to='/login'>登录页</Link></li>
                <li><Link to='/user'>用户页</Link></li>
                <li><Link to='/order'>订单页</Link></li>
            </ul>

            <h3>NavLink 自定义高亮样式类名 .a_active</h3>
            <ul>
                <li><NavLink className={({isActive})=>(isActive ? 'a_active':'')} to='/'>首页</NavLink></li>
                <li><NavLink className={({isActive})=>(isActive ? 'a_active':'')} to='/login'>登录页</NavLink></li>
                <li><NavLink className={({isActive})=>(isActive ? 'a_active':'')} to='/user'>用户页</NavLink></li>
                <li><NavLink className={({isActive})=>(isActive ? 'a_active':'')} to='/order'>订单页</NavLink></li>
            </ul>
            <Routes>
                <Route path='/login' element={<Login />}></Route>
                <Route path='/order' element={<Order />}></Route>
                <Route path='/user' element={<User />}></Route>
                <Route path='/' element={<Index />}></Route>
            </Routes>
        </div>
    )
}
